<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<c:set var="basePath" scope="request" value="<%=request.getContextPath()%>"/>
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="initial-scale=1,minimum-scale=1" />
	<title>资讯分类管理-咨询管理</title>
  <c:import url="/public/head-tag.jsp"/>
    <link rel="stylesheet" href="/pages/assets/css/service/service.css" />
</head>
<body>
    <c:import url="/public/header.jsp"/>
    <section class="container">
	
    	<div class="content">
    		<div class="content-top">
    			<h3 class="content-title">
    				<div class="bread">
    					<a href="/demo/web/newsType/listPage">资讯管理</a>
    					<span>&gt;</span>
    					<span>资讯分类管理</span>
    				</div>
    			</h3>
    			<div class="content-action">
    				<a href="javascript:"  action="item.add"  class="action-item icon-add" title="添加分类">添加分类</a>
    			</div>
    		</div>
    		<div class="content-main">
				<section class="content-item" data-template="item/list" id="box">
					<div class="content-item-top">
						<form action="/demo/web/newsType/list" method="get" autocomplete="off">
						</form>
					</div>
					<div class="content-item-block">
							<table class="table align-center">
								<thead>
								<tr>
									<th style="width:5%" class="align-left">序号</th>
									<th style="width:20%" class="align-left">名称</th>
									<th style="width:30%" class="align-left">描述</th>
									<th style="width:15%">状态</th>
									<th style="width:20%" class="align-center">操作</th>
								</tr>
								</thead>
								<tbody id="sortable">
									<tr>
										<td class="align-center" colspan="6">
											<div class="loading">加载中...</div>
										</td>
									</tr>
								</tbody>
							</table>
					</div>
				</section>
    		</div>
    	</div>
    </section>
    
   <script id="item/list" type="text/template">
        {{if !list || list.length==0}}
		<tr><td colspan="6">没有记录！</td></tr>
		{{else}}
			{{each list as item}}
				<tr>
					<td class="align-left">
						<p>{{$index+1}}</p>
					</td>
					<td class="align-left">
						<p>{{item.title}}</p>
					</td>
					<td class="align-left">{{item.content}}</td>
					<td>
						{{if item.status==1}}
						<span>显示</span>
						{{else}}
						<span class="state-red">隐藏</span>
						{{/if}}
					</td>
					<td class="align-center">
                         <a href="javascript:;" action="item.edit" data-params="{{item | toJSON}}"   class="action-link">编辑</a>
                         <a href="javascript:;" action="item.remove" data-params="{{item | toJSON}}"  class="action-link">删除</a>
                    </td>
				</tr>
			{{/each}}
		{{/if}}
    </script>
    
     <script type="text/template" id="item/edit" title="编辑分类">
    	<form action="/demo/web/newsType/updateSave" method="post">
			<div class="form-row">
				<span class="row-label">名称：</span>
				<div class="row-content">
					<input type="text" class="text" name="title"  value="{{title}}" iname="名称" ipattern="^.{2,10}$"/>
				</div>
			</div>
			<div class="form-row">
				<span class="row-label">描述：</span>
				<div class="row-content">
					<input type="text" class="text" name="content" irequired="false"  value="{{content}}" iname="描述"/>
					<p class="value-note">可选</p>
				</div>
			</div>

			<div class="form-row" >
				<span class="row-label">状态：</span>
				<div class="row-content">
					<p class="row-value">
						<input type="checkbox" id="isLoop" name="isShow" value="1" {{if status!==0}}checked="checked"{{/if}}/>
						<label for="isLoop">显示</label>
					</p>
				</div>
			</div>
				<input type="hidden" name="id" value="{{id}}" />
    	</form>
    </script>
    
     <script type="text/template" id="item/add" title="添加分类">
    	<form action="/demo/web/newsType/addSave" method="post">
			<div class="form-row">
				<span class="row-label">名称：</span>
				<div class="row-content">
					<input type="text" class="text" name="title"  value="" iname="名称" ipattern="^.{2,10}$"/>
				</div>
			</div>
			<div class="form-row">
				<span class="row-label">描述：</span>
				<div class="row-content">
					<input type="text" class="text" name="content" irequired="false"  value="" iname="描述"/>
					<p class="value-note">可选</p>
				</div>
			</div>

			<div class="form-row" >
				<span class="row-label">状态：</span>
				<div class="row-content">
					<p class="row-value">
						<input type="checkbox" id="isLoop" name="isShow" value="1" checked="checked"/>
						<label for="isLoop">显示</label>
					</p>
				</div>
			</div>
    	</form>
    </script>
    
    <script type="text/template" id="item/remove" note="删除">
    	<style>
    		.remove-content{padding:10px;color:red;}
    	</style>
    	<form action="/demo/web/newsType/deletSave" method="post">
			<div class="align-center remove-content">确定要删除该分类吗？</div>
			<input type="hidden" name="id" value="{{id}}" />
    	</form>
    </script>
    
   <script src="/pages/assets/js/libs/LAB/LAB.js"></script>
   <script>
   		var baseUrl="/pages/assets/js/libs/";
   		$LAB.require({
   			baseUrl:baseUrl,
   			scripts:[
   				['artTemplate/artTemplate2.js','artTemplate/artTemplate.helpers.js'],
				["form/jquery.formCheck.js","form/jquery.ajaxSubmit.js","form/jquery.common.js"],
	   			["dialog/mui-dialog.css","dialog/dialog-plus-min.js"]
   			]
   		},function(){
   			
    		var App={
    			alert : function(){
    				alert(arguments[0]);
    			},
    			initPlugins:function(){
    				
    			},
    			reloadItems:function(){
    				$("#box").reload();
    			},
    			addItem:function(data){
    				var id="item/add";
    				var title=document.getElementById(id).title||"添加分类";
					var content=template(id,data);
					var idialog=dialog({
						id : id,
						title:title,
						zIndex: 5,width:420,
						padding:"0 20px",
						content:content,
						onshow:function(){
							//解决当表单中只有一个input:text时按回车自动提交form的问题
							this.getContent().find("form").on("submit",function(e){
								e.preventDefault();
								return false;
							});
						},
						button:[
							{
								id:"cancel",value:"取消"
							},
							{
								id:"ok",value:"添加",
								autofocus:true,
								callback:function(){
									var $form=this.getContent().find("form");
									$form.ajaxSubmit({
										onSuccess :function(result){
											var code=result.code;
											if(code==200){
												idialog.remove();
												App.reloadItems();
											}
											else{
												var msg=result.msg || "提交失败！";
												App.alert(msg);
											}
										}
									})
									return false;
								}
							}
						]
					}).showModal();
    			},
    			editItem:function(data){
    				var id="item/edit";
    				var title=document.getElementById(id).title||"修改分类";
					var content=template(id,data);
					var idialog=dialog({
						id : id,
						title:title,
						content:content,
						zIndex: 5,width:420,
						padding:"0 20px",
						onshow:function(){
							//解决当表单中只有一个input:text时按回车自动提交form的问题
							this.getContent().find("form").on("submit",function(e){
								e.preventDefault();
								return false;
							});
						},
						button:[
							{
								id:"cancel",value:"取消"
							},
							{
								id:"ok",value:"提交修改",
								autofocus:true,
								callback:function(){
									var $form=this.getContent().find("form");
									$form.ajaxSubmit({
										onSuccess :function(result){
											var code=result.code;
											if(code==200){
												idialog.remove();
												App.reloadItems();
											}
											else{
												var msg=result.msg || "提交失败！";
												App.alert(msg);
											}
										}
									})
									return false;
								}
							}
						]
					}).showModal();
    			},
    			removeItem:function(data){
    				var id="item/remove";
    				var title="警告";
    				var content=template(id,data);
					var idialog=dialog({
						id : id,
						zIndex: 5,width:300,
						padding:"40px 20px",
						title:title,
						content:content,
						button:[
							{
								id:"cancel",value:"取消"
							},
							{
								id:"ok",value:"确定删除",
								autofocus:true,
								callback:function(){
									var $form=this.getContent().find("form");
									$form.ajaxSubmit({
										onSuccess :function(result){
											var code=result.code;
											if(code==200){
												idialog.remove();
												App.reloadItems();
											}
											else{
												var msg=result.msg || "提交失败！";
												App.alert(msg);
											}
										}
									})
									return false;
								}
							}
						]
					}).showModal();
    			},
    			init : function(){
					this.initPlugins();
					$("[data-template]").ajaxLoad();
					
					$("body").on("click","[action]:not(form)",function(){
						var $this=$(this);
						var action=$this.attr("action");
						var data=$this.data("params");
						if(action=="item.remove"){
							App.removeItem(data);
						}
						else if(action=="item.edit"){
							App.editItem(data);
						}
						else if(action=="item.add"){
							App.addItem(data);
						}
						
						return false;
					})
					
    			}
    		}
    		App.init();
   		})
    </script>
    </body>
</html>